'use stricts';


//文档加载完毕直接执行
$(function(){
	function resizeBanner(){
		var windowWidth = $(window).width();
		//判断屏幕大小，并根据大小选择显示图片
		var isSmallScreen = windowWidth < 768;
		//获取一个DOM数组并遍历
		$('#main_ad > .carousel-inner > .item').each(function(index, item) {
			var $item = $(item); //把DOM对象转换成JQuery对象
			var imgSrc = $item.data(isSmallScreen?'img-sm':'img-lg');
			//大屏幕设置backgroud，小屏幕设置img
			if (isSmallScreen) {
				$item.html('<img src="'+ imgSrc +'">');
				// $item.css('backgroundImage', '');
			} else {
				$item.css('backgroundImage', 'url("'+imgSrc+'")');
				$item.empty();
			}

		}); 
	};
	//监控屏幕改变大小,并且立即触发resize
	// resizeBanner(); 
	$(window).on('resize', resizeBanner).trigger('resize');
	$('[data-toggle="tooltip"]').tooltip();

	var $ulContainer = $(".nav-tabs");
	//获取所有子元素的宽度和
	var width = 30; //原本ul上有padding-left属性值
	$ulContainer.children().each(function(index, element) {
		width += $(element).width()
	});
	//判断当前屏幕是否大于屏幕宽度，如果大于，才设置固定宽度
	if (width > $(window).width()) {
		$ulContainer
		.css('width', width)
		.parent().css('overflow-x', 'scroll');
	}

	var $newsTitle = $(".news-title")
	//给a注册点击事件
	$("#news a").on('click', function(event) {
		//获取当前元素
		var $this = $(this);
		var title = $this.data('title');
		// $newsTitle.text(title);
		$newsTitle.html('<p>'+title+'</p>');

	});


	//移动端轮播图支持手动左滑右滑
	// 获取界面上的轮播图容器
  var $carousels = $('.carousel');
  var startX, endX;
  var offset = 50;
  // 注册滑动事件
  $carousels.on('touchstart', function(e) {
    // 手指触摸开始时记录一下手指所在的坐标X
    startX = e.originalEvent.touches[0].clientX;
    // console.log(startX);
  });

  $carousels.on('touchmove', function(e) {
    // 变量重复赋值
    endX = e.originalEvent.touches[0].clientX;
    // console.log(endX);
  });
  $carousels.on('touchend', function(e) {
    console.log(e);
    // 结束触摸一瞬间记录最后的手指所在坐标X
    // 比大小
    // console.log(endX);
    // 控制精度
    // 获取每次运动的距离，当距离大于一定值时认为是有方向变化
    var distance = Math.abs(startX - endX);
    if (distance > offset) {
      // 有方向变化
      // console.log(startX > endX ? '←' : '→');
      // 2. 根据获得到的方向选择上一张或者下一张
      //     - $('a').click();
      //     - 原生的carousel方法实现 http://v3.bootcss.com/javascript/#carousel-methods
      $(this).carousel(startX > endX ? 'next' : 'prev');
    }
  });


})

// $element.data() 获取自定义属性的函数(data-abc),参数是abc

